<template>
    <div>
        <h1>获取模块化的vuex里的值</h1>
        <h2>{{$store.state.user.userName}}</h2>
        <hr>
        <h1>通过mapState获取vuex里user模块的tate参数</h1>
        <h2>{{age}}</h2>
        <hr>
        <h1>获取vuex里的getters(计算属性)的值</h1>
        <h2>{{appNameWithVersion}}</h2>
        <hr>
        <button @click="add">点击往state里添加值</button>
        <h2>{{appVersion}}</h2>
        <hr>
        <button @click="registerModule">动态注册模块</button>
        <p v-for="(item,index) in todoList" :key="index">{{item}}</p>
        <hr>
        <input type="text" v-model="inputValue">
    </div>
</template>

<script>
//用于处理开启了命名空间的vuex模块
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('user')
import { mapGetters, mapMutations, mapActions, mapState as mapState2} from 'vuex'
export default {
    data() {
        return {
            
        };
    },
    mounted() {
        
    },
    methods: {
        ...mapMutations(['SET_STATE','CHANGE_STATE']),
        ...mapMutations('user',['CHANGE_AGE']),
        // ...mapActions('user',['requests']),
        add(){
            this.SET_STATE()
            this.CHANGE_AGE()
            //这个异步看控制台的打印
            // this.requests()
        },
        //动态注册vuex模块
        registerModule(){
            // this.$store.registerModule('todo',{
            //     state:{
            //         todoList:['我爱学习','学习爱我']
            //     }
            // })
             //在子模块里动态注册模块  在user模块里动态注册模块
              this.$store.registerModule(['user','todo'],{
                state:{
                    todoList:['我爱学习','学习爱我']
                }
            })
        }
    },
    computed:{
        ...mapState(['age','appVersion']),
        ...mapState2({
            //  todoList:state=>state.todo?state.todo.todoList:[]
             todoList:state=>state.user.todo?state.user.todo.todoList:[]//在子模块里动态注册模块
         }),
        ...mapGetters(['appNameWithVersion','appVersion']),
        //因为开启了严格模式  当输入框双向绑定vuex里的值的后改变时就会报错 因为他不是通过mutation改变的 解决方法如下:
        inputValue:{
            get(){
                return this.$store.state.inputValue
            },
            set(value){
                //调用vuex里的mutation方法改变
                this.CHANGE_STATE(value)
            }
        }
    }
};
</script>

<style lang="less" scoped>

</style>